/* 布局css */
.container{
	display: flex;/* //弹性布局 */
	flex-flow: row wrap;/* //行排列  换行 */
	justify-content: space-around;/* //均等分布 */
}
.box{
	padding: 10px;/* //充气 上下左右10px */
	margin: 10px;/* //外边距 上下左右10px */
	text-align: center;/* //居中 */
}
/* //背景为红色   danger 代表红色 */
.bg-danger{
	background-color: orangered;
}
/* //背景为蓝色   primary 代表蓝色 */
.bg-primary{
	background-color: royalblue;
}

/* //占一格 */
.col-1{
	flex: 1 1 auto;/* 占1格 1放大比例 auto 自适应宽度 */
}
.col-2{
	flex: 2 1 auto;/* 占2格 1放大比例 auto 自适应宽度 */
}
.col-3{
	flex: 3 1 auto;/* 占3格 1放大比例 auto 自适应宽度 */
}
.col-4{
	flex: 4 1 auto;/* 占4格 1放大比例 auto 自适应宽度 */
}
.col-5{
	flex: 5 1 auto;/* 占5格 1放大比例 auto 自适应宽度 */
}
.col-6{
	flex: 6 1 auto;/* 占6格 1放大比例 auto 自适应宽度 */
}
.col-7{
	flex: 7 1 auto;/* 占7格 1放大比例 auto 自适应宽度 */
}
.col-8{
	flex: 8 1 auto;/* 占8格 1放大比例 auto 自适应宽度 */
}
.col-9{
	flex: 9 1 auto;/* 占9格 1放大比例 auto 自适应宽度 */
}
.col-10{
	flex: 10 1 auto;/* 占10格 1放大比例 auto 自适应宽度 */
}
.col-11{
	flex: 11 1 auto;/* 占11格 1放大比例 auto 自适应宽度 */
}
.col-12{
	flex: 12 1 auto;/* 占12格 1放大比例 auto 自适应宽度 */
}
